import React, {Component} from 'react';
import {Layout, Menu, Breadcrumb, Spin} from 'antd';
import './home.scss';
import axios from 'axios';
import Main from './content'
import { relative } from 'path';

const {Header, Content, Sider} = Layout;

const yearArr = ['2018','2019','2020','2021','2022'];
const typeArr = ['全部', '科幻', '惊悚', '动作', '喜剧', '励志', '战争'];

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            tip: '正在加载中...',
            type: '',
            year: 2018,
            selTypeKey: '全部',
            selYearKey: '2018',          
            movies: []
        }
    }
    componentDidMount() {
        this._getAllMovies();
    }

    /**
     * 获取电影数据
     */
    _getAllMovies() {
        axios.get(`/api/v0/movies?type=${this.state.type || ''}&year=${this.state.year || ''}`)
            .then(res => {
                this.setState({
                    loading: false,
                    movies: res.data.data,
                })
            })
            .catch(err => console.log(err));
    }
    
    /**
     * 选择类型
     */
    _selectType = ({key}) => {
        this.setState({
            type: key === '全部' ? '' : key,
            selTypeKey: key
        }, () => {
            this._getAllMovies();
        })
    }

    /**
     * 选择年份
     */
    _selectYear = ({key}) => {
        this.setState({
            year: key,
            selYearKey: key
        }, () => {
            this._getAllMovies();
        })
    }


    _renderContent = () => {
        const {movies} = this.state

        if (!movies || !movies.length) 
            return null

        return (<Main movies={movies}/>)
    }

    render() {
        const {selTypeKey, selYearKey, loading, tip} = this.state;
        return (
            <Layout>
                <Header className="header">
                    <div className="logo"/>
                    <Menu
                        mode="horizontal"
                        defaultSelectedKeys={[selTypeKey]}
                        onSelect={this._selectType}>
                        {typeArr.map((type, i) => (
                            <Menu.Item key={type}>
                                <span>{type}</span>
                            </Menu.Item>
                        ))
}
                    </Menu>
                </Header>
                <Layout>
                    <Sider
                        width={200}
                        style={{
                        background: '#fff'
                    }}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={[selYearKey]}
                            style={{
                            height: '100%',
                            maxWidth: 230
                        }}
                            onSelect={this._selectYear}>
                            {yearArr.map((year, i) => (
                                <Menu.Item key={year}>
                                    {year}年上映
                                </Menu.Item>
                            ))
}
                        </Menu>
                    </Sider>
                    <Layout
                        style={{
                        padding: '0 24px 24px'
                    }}>
                        <Breadcrumb
                            style={{
                            margin: '16px 0'
                        }}>
                            <Breadcrumb.Item>首页</Breadcrumb.Item>
                            <Breadcrumb.Item>{selTypeKey}</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content style={{margin: 0, minHeight: 280}}>
                            <Spin spinning={loading} tip={tip} />
                            {this._renderContent()}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}

export default Home;